<template>
  <div>
    <Form :model="so" :label-width="80">
      <Row :gutter="16">
        <Col :span="5">
          <FormItem label="开发环境">
            <RadioGroup v-model="so.env" @on-change="changeEnv">
              <Radio label="uat">UAT环境</Radio>
              <Radio label="prod">生产环境</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col :span="7">
          <FormItem label="分组条件">
            <CheckboxGroup v-model="so.groups">
              <Checkbox label="ProcessGroupName">流程组</Checkbox>
              <Checkbox label="ProcessName">流程名称</Checkbox>
              <Checkbox label="ProjectName">项目名称</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </Col>
        <Col :span="3">
          <FormItem label="猎豹相关">
            <Switch v-model="so.leoOnly" />
          </FormItem>
        </Col>
        <Col :span="4">
          <FormItem label="年度">
            <Select v-model="so.year">
              <Option v-for="item of years" :value="item.value" :key="item.value">{{ item.text }}</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="19">
          <FormItem label="流程组">
            <Select v-model="so.processGroups" filterable multiple>
              <Option :value="item.ID" :key="item.ID" v-for="item of processGroups">{{ item.ProcessGroupDisplayName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col :span="3">
          <FormItem label="">
            <Button icon="md-search" shape="circle" type="primary" @click="getDetailStatistics()">查询</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <panel :title="so.env == 'uat' ? 'UAT环境' : '生产环境'" :enableToggle="false" :maxHeight="autoHeight - 85">
      <template slot="extra">
        <Button icon="md-download" shape="circle" type="success" @click="exports()">下载</Button>
      </template>
      <Row :gutter="16">
        <Col span="12">
          <h5>已提交的单据统计</h5>
          <Table border :columns="dynamicColumns" :data="submits" :height="autoHeight - 160"></Table>
        </Col>
        <Col span="12">
          <h5>已审核的单据统计</h5>
          <Table border :columns="dynamicColumns" :data="audits" :height="autoHeight - 160"></Table>
        </Col>
      </Row>
    </panel>
  </div>
</template>
<script>
import XLSX from 'xlsx';
export default {
  data() {
    return {
      config: {
        hosts: []
      },
      autoHeight: 500,
      years: [],
      so: {
        env: 'prod',
        groups: [],
        year: 'all',
        leoOnly: false,
        processGroups: []
      },
      columns: [
        {
          title: '日期',
          key: 'YearMonth',
          width: 100
        },
        {
          title: '数量',
          key: 'Counts',
          width: 100
        }
      ],
      processGroups: [],
      dynamicColumns: [],
      submits: [],
      audits: []
    };
  },
  methods: {
    getDetailStatistics() {
      this.$http.post(`/api/iworkflow/${this.so.env}/statistics/submitDetails`, this.so).then(res => {
        this.submits = res.datas;
      });

      this.$http.post(`/api/iworkflow/${this.so.env}/statistics/auditDetails`, this.so).then(res => {
        this.audits = res.datas;
      });

      this.getDynamicColumns();
    },
    getDynamicColumns() {
      let rs = [];

      for (let item of this.so.groups) {
        if (item == 'ProjectName') {
          rs.push({
            title: '项目名称',
            key: item,
            width: 200
          });
        }

        if (item == 'ProcessName') {
          rs.push({
            title: '流程名称',
            key: item,
            width: 200
          });
        }

        if (item == 'ProcessGroupName') {
          rs.push({
            title: '流程组',
            key: item,
            width: 200
          });
        }
      }

      this.dynamicColumns = [
        {
          title: '序号',
          width: 70,
          type: 'index'
        },
        ...rs,
        ...this.columns
      ];
    },
    getProcessGroup() {
      let requestData = {
        host: this.config.hosts.find(h => h.env == this.so.env).url,
        api: '/api/ProcessGroup/GetProcessGroupList',
        data: [
          { name: 'IsDisabled', type: 'query', value: false },
          { name: 'PageSize', type: 'query', value: 20000 }
        ]
      };

      this.$http.post(`/api/iworkflow/webapi/invoke`, requestData).then(res => {
        if (res.success) {
          this.processGroups = res.result.data.dataList;
        }
      });
    },
    changeEnv() {
      this.so.processGroups = [];
      this.getProcessGroup();
    },
    exports() {
      let index = 1;
      let titles = this.dynamicColumns.map(d => d.title);

      let submitDatas = [titles];
      let auditDatas = [titles];

      this.submits.forEach(s => {
        let rs = [index++];

        for (let col of this.dynamicColumns) {
          if (col.key) {
            rs.push(s[col.key]);
          }
        }

        submitDatas.push(rs);
      });

      index = 1;
      this.audits.forEach(s => {
        let rs = [index++];

        for (let col of this.dynamicColumns) {
          if (col.key) {
            rs.push(s[col.key]);
          }
        }

        auditDatas.push(rs);
      });

      const ws1 = XLSX.utils.aoa_to_sheet(submitDatas, {
        '!cols': [
          {
            width: 120
          },
          {
            width: 120
          },
          {
            width: 120
          },
          {
            width: 120
          }
        ]
      });
      const ws2 = XLSX.utils.aoa_to_sheet(auditDatas);

      const wb = XLSX.utils.book_new();

      XLSX.utils.book_append_sheet(wb, ws1, '已提交单据');
      XLSX.utils.book_append_sheet(wb, ws2, '已审批的单据');

      XLSX.writeFile(wb, '单据统计.xlsx');
    },
    getConfigs() {
      this.$http.get('/api/iworkflow/webapi/configs/').then(res => {
        this.config = res;

        this.getProcessGroup();
      });
    }
  },
  mounted() {
    let currentYear = new Date().getFullYear();

    this.years.push({
      text: '全部',
      value: 'all'
    });

    for (let year = currentYear; year >= 2018; year--) {
      this.years.push({
        text: year.toString(),
        value: year.toString()
      });
    }

    this.getConfigs();
    this.getDetailStatistics();
    this.$bus.on('windowResizeChanged', client => (this.autoHeight = client.height - 20));
  }
};
</script>
<style lang="less" scoped>
.ivu-form {
  background: #fff;
  padding: 5px 15px;
  border-radius: 5px;
  margin-bottom: 10px;

  .ivu-form-item {
    background: #fff;
    margin-bottom: 5px;

    .ivu-form-item {
      .ivu-checkbox + span,
      .ivu-checkbox-wrapper + span {
        font-weight: 100 !important;
      }
    }
  }
}
</style>
